<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>33-弹性盒模型</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";background:#ccc;}
			.box{
				display:flex;
				width:1000px;
				height:390px;
				margin:0 auto;
				background:#fff;
				flex-direction:row;
				flex-wrap:wrap;
				justify-content:space-around;
				align-content:flex-start;
			}
			.box li{
				width:184px;
				height:180px;
				margin-top:10px;	
			}
			.box li p{
				margin-top:5px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<li><img src="images/1.webp" alt="1"><p>天猫</p></li>
			<li><img src="images/2.png" alt="2"><p>聚划算</p></li>
			<li><img src="images/3.png" alt="3"><p>天猫国际</p></li>
			<li><img src="images/4.webp" alt="4"><p>外卖</p></li>
			<li><img src="images/5.png" alt="5"><p>天猫超市</p></li>
			<li><img src="images/6.png" alt="6"><p>充值中心</p></li>
			<li><img src="images/7.png" alt="7"><p>飞猫旅行</p></li>
			<li><img src="images/8.png" alt="8"><p>领金币</p></li>
			<li><img src="images/9.webp" alt="9"><p>拍卖</p></li>
			<li><img src="images/10.webp" alt="10"><p>分类</p></li>
		</ul>		
		<!-- <ul class="box">
			<li><img src="images/1.webp" alt="1"><p>天猫</p></li>
			<li><img src="images/2.png" alt="2"><p>聚划算</p></li>
			<li><img src="images/3.png" alt="3"><p>天猫国际</p></li>
			<li><img src="images/4.webp" alt="4"><p>外卖</p></li>
			<li><img src="images/5.png" alt="5"><p>天猫超市</p></li>
			<li><img src="images/6.png" alt="6"><p>充值中心</p></li>
			<li><img src="images/7.png" alt="7"><p>飞猫旅行</p></li>
			<li><img src="images/8.png" alt="8"><p>领金币</p></li>
			<li><img src="images/9.webp" alt="9"><p>拍卖</p></li>
			<li><img src="images/10.webp" alt="10"><p>分类</p></li>
		</ul>	 -->
		
	</body>
</html>
